<template>
  <div class="bg" ref="bg">
    <div class="title" ref="titleRef" id="title">
      <router-link ref="rl" class="rl" to="/">HOME</router-link>
      <router-link ref="rl" class="rl" to="/about">ABOUT</router-link>
      <router-link ref="rl" class="rl" to="/games">GAMES</router-link>
      <router-link ref="rl" class="rl" to="/album">ALBUM</router-link>
      <!-- <router-link ref="rl" class="rl" to="/home">JOIN</router-link> -->
    </div>
    <div class="music">
      <div class="box">
        <div class="musictitle" ref="musicTitleRef"></div>
      </div>
      <div class="circle on" @click="getNext">
        <div class="pre"></div>
      </div>
      <div class="play on">
        <div ref="playRef" class="playing" @click="mpause"></div>
        <div ref="pauseRef" class="pause" @click="mplay">| |</div>
      </div>
      <div class="circle on" @click="getNext">
        <div class="next"></div>
      </div>
    </div>
    <audio ref="musicRef" :src="musicUrl"></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      musicUrl: "",
      audio:{},
    };
  },
  mounted() {
    this.getMusic();
  },
  methods: {
    async getMusic() {
      const { data: res } = await this.$axios.get(
        "https://api.uomg.com/api/rand.music?sort=热歌榜&format=json"
      );
      console.log(res);
      this.musicUrl = res.data.url;
      let title = res.data.name + " - " + res.data.artistsname;
      this.$refs.musicTitleRef.innerText = title;
      this.audio = this.$refs.musicRef
    },
    mpause() {
      this.$refs.playRef.style.display = "none";
      this.$refs.pauseRef.style.display = "block";
      this.$refs.musicRef.play();
    },
    mplay() {
      this.$refs.playRef.style.display = "block";
      this.$refs.pauseRef.style.display = "none";
      this.$refs.musicRef.pause();
    },
    /* getNext() {
      const p = new Promise((resolve) => {
        this.getMusic();
        resolve();
      });
      let t = this;
      p.then(
        setTimeout(() => {
          t.mpause();
        }, 1000)
      );
    }, */
    async getNext() {
      await this.getMusic();
      this.$nextTick((() => {
        console.log('下一首')
        this.mpause();
      }))
    },
/*     changeBG(){
      this.$refs.bg.addEventlistener('mouseenter',() => {
        this.$refs.bg.style.background = "linear-gradient(to right bottom,rgba(224, 130, 206, 0.5),rgba(191, 184, 218, 0.5),rgba(127, 172, 214, 0.5));"
      });
      this.$refs.bg.addEventlistener('mouseleave',() => {
        this.$refs.bg.style.background = "linear-gradient(to right bottom,rgba(224, 130, 206, 0),rgba(191, 184, 218, 0),rgba(127, 172, 214, 0));"
      });
      console.log(1);
    } */
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 80px;
  transition: 2s ease;
  background: linear-gradient(
    to right bottom,
    rgba(224, 130, 206, 0),
    rgba(191, 184, 218, 0),
    rgba(127, 172, 214, 0)
  );
}
.bg:hover {
  background: linear-gradient(
    to right bottom,
    rgba(224, 130, 206, 0.7),
    rgba(191, 184, 218, 0.7),
    rgba(127, 172, 214, 0.7)
  );
}

.title {
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 300px;
  width: 400px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rl {
  text-decoration: none;
  margin: 0 20px;
  color: rgb(92, 149, 202);
  font-size: 25px;
  transition: 0.3s ease;
}
.rl:hover {
  text-shadow: 0 0 40px rgb(140, 213, 255), 0 0 40px rgb(140, 213, 255);
  color: #fff;
}
.music {
  position: absolute;
  height: 80px;
  width: 400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  left: 100%;
  transform: translateX(-110%);
  top: 0%;
  margin: 0 -30px;
}
.box {
  width: 200px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.musictitle {
  position: relative;
  text-align: center;
  animation: music 5s linear 0 infinite reverse;
  font-family: Arial, Helvetica, sans-serif;
}
.play {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.playing {
  position: absolute;
  border-left: 20px solid rgba(255, 255, 255, 0.8);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translate(67.5%, 22.5%);
}
.pause {
  display: none;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bolder;
  font-size: 140%;
  transform: translate(40%, 10%);
  position: absolute;
}
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: rgba(255, 255, 255, 0.8) 2px solid;
}
.pre {
  transform: translate(30%, 25%);
  width: 0;
  height: 0;
  position: relative;
  z-index: 9;
  border-right: 15px solid rgba(255, 255, 255, 0.8);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.next {
  transform: translate(70%, 25%);
  width: 0;
  height: 0;
  position: relative;
  z-index: 9;
  border-left: 15px solid rgba(255, 255, 255, 0.8);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.on:hover {
  filter: brightness(250%);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

@keyframes music {
  from {
    left: 0;
  }
  to {
    left: -80%;
  }
}
</style>